<template>
  <Panel :title="detailTitle" class="flow-channel" v-bind="props.config">
    <div class="channel" v-if="currentType">
      <!-- 0过江江通道  1重点路段 -->
      <div class="north">
        <span>向北：</span>
        <span class="north-number">{{ northTotal }}</span>
        <span class="unit"> 辆</span>
      </div>

      <RiverEchart
        :dataTotal="dataTotal"
        :northData="northData"
        :southData="southData"
        :nameData="nameData"
        class="river-chart"
        @pillarClick="tableClick"
      >
      </RiverEchart>
      <!-- 0过江江通道  1重点路段 -->
      <div class="south">
        <span>向南：</span>
        <span class="south-number">{{ southTotal }}</span>
        <span class="unit"> 辆</span>
      </div>
    </div>

    <!-- <ScrollTable
      :columns="columns"
      :dataSource="dataSource"
      scroll="calc(100% - 0.38rem)"
      @tableClick="tableClick"
      :loading="tableLoading"
      rowKey="importRoadId"
      v-else
    >
      <template v-slot:condition="{ text }">
        <span :class="mapJamTypeClass(text)"> {{ text }}</span>
      </template>
    </ScrollTable> -->
    <!-- <Empty emptyData="暂未开放，敬请期待"></Empty> -->
  </Panel>
</template>

<script>
export default {
  name: 'FlowChannel'
}
</script>
<script setup>
/**
 * @desc 跨江通道/重点路段流量(二级)
 * @auther 阳坤
 * @date 2022/10/21
 *
 **/

import Panel from '../../components/panel'
import RiverEchart from './RiverEchart.vue'
import ScrollTable from '../../components/scroll-table'
import flowApi from '../../api/flow.js'
import store from '@/store'
import useWatchStore from '@/hooks/useWatchStore'
import { ref, defineEmits, defineProps, computed, onBeforeUnmount } from 'vue'
import Empty from '../../components/empty'

const props = defineProps({
  // 详情配置
  config: {
    type: Object,
    default: () => {
      return {}
    }
  },
  // 显示哪个类型
  showType: {
    type: String, // channel or road
    default: ''
  }
})

// 判断显示过江通道还是重要路段
const currentType = ref(true)
// 标题
const detailTitle = ref('跨江通道')

// 获取vuex的值 变成响应式
const isProvince = computed(() => store.state.config.isProvince)
// const activeId = computed(() => store.state.config.detailConfig.data.importRoadId)

// emit回调方法
const emit = defineEmits(['setDetail'])
// 向北总计
const northTotal = ref()
// 向南总计
const southTotal = ref()

// 柱状图统计图数据
const dataTotal = ref([])
const northData = ref([])
const southData = ref([])
const nameData = ref([])

// 表头
const columns = [
  {
    title: '路段名称',
    dataIndex: 'roadName',
    key: 'roadName',
    ellipsis: true
  },
  {
    title: '断面流量',
    dataIndex: 'flow',
    key: 'flow',
    ellipsis: true
  },
  {
    title: '断面车速',
    dataIndex: 'speed',
    key: 'speed',
    ellipsis: true
  },
  {
    title: '通行情况',
    dataIndex: 'condition',
    key: 'condition',
    ellipsis: true
  }
]
// 表格数据
const dataSource = ref([])

// Loading项
const tableLoading = ref(false)

/**
 * 获取数据
 */
const getData = (argParams, action) => {
  tableLoading.value = true
  const params = {
    roadType: argParams.roadType,
    province: '32',
    city: isProvince.value ? argParams.areaCode : ''
  }

  // 存在则显示指定类型
  if (props.showType) {
    if (props.showType == 'channel') {
      // 只显示跨江通道
      currentType.value = true
      detailTitle.value = '跨江通道'
      getAcrossRiverChannel(params)
    } else {
      // 只显示重点路段
      currentType.value = false
      detailTitle.value = '重点路段'
      getImportRoad(params)
    }
  } else {
    //  否则根据省、市切换
    currentType.value = isProvince.value
    if (isProvince.value) {
      detailTitle.value = '跨江通道'
      getAcrossRiverChannel(params)
    } else {
      detailTitle.value = '重点路段'
      getImportRoad(params)
    }
  }
}
/**
 * 跨江通道柱状图
 */
const getAcrossRiverChannel = params => {
  dataTotal.value = []
  northData.value = []
  southData.value = []
  nameData.value = []

  flowApi
    .getAcrossRiverChannel(params)
    .then(res => {
      if (res.data) {
        northTotal.value = res.data.northerTotal
        southTotal.value = res.data.southTotal
        res.data.riverCrossingFlowInfoResponses.forEach(item => {
          dataTotal.value.push(item.total)
          northData.value.push(item.northData)
          southData.value.push(item.southData)
          nameData.value.push(item.riverCrossingChannelName)
        })
      }
    })
    .finally(() => {
      tableLoading.value = false
    })
}
/**
 * 重点路段表格数据
 */
const getImportRoad = params => {
  flowApi
    .getImportRoad(params)
    .then(res => {
      if (res.data) {
        dataSource.value = res.data
      }
    })
    .finally(() => {
      tableLoading.value = false
    })
}

/**
 * 列表项点击
 */
const tableClick = (data, type) => {
  if (type == 'channel') {
    data = {
      roadName: data
    }
  }
  emit('setDetail', {
    type: 'flow-channel',
    actions: 'click',
    data: {
      ...data,
      showType: type
    },
    config: props.config.detailConfig
  })
}

/**
 * 拥堵情况字段映射 class
 */
const mapJamTypeClass = value => {
  const level = {
    畅通: 'open ',
    轻度拥堵: 'slight ',
    中度拥堵: 'moderate ',
    重度拥堵: 'severe '
  }
  return level[value]
}

/**
 * 初始化以及监听地市编码跟路网类型
 */
useWatchStore(getData)
</script>

<style scoped lang="less">
@import url(../../styles/themes/index.less);
.flow-channel {
  /deep/.mz-panel-content-main {
    justify-content: space-between;
    padding: 6px 5px 5px 11px;
    .channel {
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 0 10px;
      .north,
      .south {
        font-size: 14px;
        color: #333333;
      }

      .north {
        &-number {
          color: #3385ff;
        }
      }

      .south {
        &-number {
          color: #2fc576;
        }
      }

      .river-chart {
        flex: 1;
      }

      .open {
        color: #29bf72;
      }

      .slight {
        color: #edaa0a;
      }

      .moderate {
        color: #f57900;
      }

      .severe {
        color: #f53f3f;
      }
    }

    // .loading-box {
    //   position: absolute;
    //   width: 99%;
    //   height: 100%;
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
    //   background: rgba(233, 240, 253, 0.8);
    // }

    .ant-table-thead > tr > th,
    .ant-table-tbody > tr > td {
      padding: 8px 4px 8px 11px;
    }
  }
}
</style>
